<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>吕梁学院</title>
		<script src="js/bootstrap.min.js"></script>
		<script src="js/jquery.min.js"></script>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<script>
			//JavaScript代码
			function calc(){
				//1. 从文本框取工资
				salary = $("#sal").val();  //"6000"
				salnum = parseInt(salary); //把"6000"变成6000
				//2.计算
				ylgr =salnum *0.08;//个人缴纳的养老保险
			    ylgs =salnum *0.2;//公司缴纳的养老保险
			    
			    ybgr =salnum *0.02;//个人缴纳的医疗保险
			    ybgs =salnum *0.06;//公司缴纳的医疗保险
			    
			    shiyegr =salnum *0.005;//个人缴纳的失业保险
			    shiyegs =salnum *0.015;//公司缴纳的失业保险
			    
			    gsgr =salnum *0;//个人缴纳的工伤保险
			    gsgs =salnum *0.005;//公司缴纳的工伤保险
			    
			    sygr =salnum *0;//个人缴纳的生育保险
			    sygs =salnum *0.008;//公司缴纳的生育保险
			    
			    gjjgr =salnum *0.12;//个人缴纳的公积金保险
			    gjjgs =salnum *0.12;//公司缴纳的公积金保险
			    //3.把计算结果放到单元格
			    $("#ylgr").html(ylgr);//养老
			    $("#ylgs").html(ylgs);
			    
			    $("#ybgr").html(ybgr);//医保
			    $("#ybgs").html(ybgs);
			    
			    $("#shiyegr").html(shiyegr);//失业
			    $("#shiyegs").html(shiyegs);
			    
			    $("#gsgr").html(gsgr);//工伤
			    $("#gsgs").html(gsgs);
			    
			    $("#sygr").html(sygr);//生育
			    $("#sygs").html(sygs);
			    
			    $("#gjjgr").html(gjjgr);//公积金
			    $("#gjjgs").html(gjjgs);
			}
		</script>
	</head>
	<body>
		<table class="table table-bordered">
			<tr class="text-center">
				<td>工资</td>
				<td colspan="3">
					<input class="form-control" placeholder="请输入个人工资" type="text" id="sal" />
				</td>
				<td>
					<button onclick="calc()" class="btn btn-danger btn-block">计算</button>
				</td>
			</tr>
			<tr class="text-center bg-primary">
				<td>险种</td>
				<td>个人%</td>
				<td>个人</td>
				<td>公司%</td>
				<td>公司</td>
			</tr>
			<tr class="text-center">
				<td>养老</td>
				<td>8%</td>
				<td id="ylgr"></td>
				<td>20%</td>
				<td id="ylgs"></td>
			</tr>
			<tr class="text-center">
				<td>医保</td>
				<td>2%</td>
				<td id="ybgr"></td>
				<td>6%</td>
				<td id="ybgs"></td>
			</tr>
			<tr class="text-center">
				<td>失业</td>
				<td>0.5%</td>
				<td id="shiyegr"></td>
				<td>1.5%</td>
				<td id="shiyegs"></td>
			</tr>
			<tr class="text-center">
				<td>工伤</td>
				<td>0%</td>
				<td id="gsgr"></td>
				<td>0.5%</td>
				<td id="gsgs"></td>
			</tr>
			<tr class="text-center">
				<td>生育</td>
				<td>0%</td>
				<td id="sygr"></td>
				<td>0.8%</td>
				<td id="sygs"></td>
			</tr>
			<tr class="text-center">
				<td>公积金</td>
				<td>12%</td>
				<td id="gjjgr"></td>
				<td>12%</td>
				<td id="gjjgs"></td>
			</tr>
		</table>
	</body>
</html>
